<template>
  <!-- 
      左侧的弹出层
      通过store.state.page_control.popup.left控制显示装填
  -->
  <van-popup
    v-model="$store.state.page_control.popup.left"
    position="left"
    get-container="body"
    round
    :style="{ width: '60%', height: '100%' }"
    z-index="100"
  >
    <!-- 弹出层的头部显示 -->
    <div class="left-popup-header">
      <div class="left-popup-header-body">
        <!-- 用户的显示 -->
        <van-row class="user-card" type="flex" align="center">
          <van-col>
            <!-- 如果用户登录了显示用户头像，没有登录显示农大图标 -->
            <van-image
              round
              class="photo"
              :src="$store.state.data.userinfo.image"
              width="60px"
              height="60px"
              v-if="$store.getters.is_login"
            />
            <van-image
              round
              class="photo"
              src="./static/icon/school_badge.png"
              width="60px"
              height="60px"
              v-else
            />
          </van-col>
          <!-- 如果登录了显示用户名，没有登录显示“请登录” -->
          <van-col class="left-popup-header-body-uname">
            <h1 v-if="$store.getters.is_login">{{ $store.state.data.userinfo.username }}</h1>
            <h1 v-else>请登录</h1>
          </van-col>
        </van-row>
        <!-- 如果没有登录显示“登录”或者“注册”按钮,如果登录了显示“登出”按钮 -->
        <van-row align="center" class="van-col-button">
          <van-col span="12" offset="12" v-if="!$store.getters.is_login">
            <van-button type="primary" size="mini" @click="toLogin">登录</van-button>
            <van-button type="primary" size="mini" @click="toRegister">注册</van-button>
          </van-col>
          <van-col span="8" offset="16" v-else>
            <van-button type="primary" size="mini" @click="toLogout">登出</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 进行快捷的跳转操作，等所有页面都编写完成后，在制作此功能 -->
    <van-cell-group>
      <van-cell title="首页" @click="toHome" />
      <van-cell title="社区" @click="toSection" />
      <van-cell title="搜索" @click="toSearch" />
      <van-cell title="个人主页" v-if="$store.getters.is_login" />
      <van-cell title="历史足迹" v-if="$store.getters.is_login" />
      <van-cell title="意见反馈" />
    </van-cell-group>
    <!-- <footer>@版权所有</footer> -->
  </van-popup>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "left-popup",
  methods: {
    ...mapMutations(["logout", "close_leftpopup"]),
    toHome() {
      this.$router.push("/home");
      this.close_leftpopup();
    },
    toSearch() {
      this.$router.push("/search");
      this.close_leftpopup();
    },
    toSection() {
      this.$router.push("/section");
      this.close_leftpopup();
    },
    toLogin() {
      this.$router.push("/account/login");
      this.close_leftpopup();
    },
    toLogout() {
      this.commen.logout((res) => {
        if (res.data.status === 200) {
          this.$dialog({ message: "登出成功" });
          this.logout();
          this.close_leftpopup();
        }
      });
    },
    toRegister() {
      this.$router.push("/account/register");
      this.close_leftpopup();
    },
  },
};
</script>

<style>
.left-popup-header {
  background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597974610089&di=11d563ec5e8863e114596d979b35c2f9&imgtype=0&src=http%3A%2F%2Ffile05.16sucai.com%2F2015%2F0615%2F0f9320e353671b9b02049dec80a7fde3.jpg")
    no-repeat fixed;
  z-index: -1;
  background-size: cover;
}
.left-popup-header::after {
  content: "";
  background: inherit;
  filter: blur(2px);
  z-index: 2;
}
.left-popup-header-body {
  width: 100%;
  height: 100%;
}
.left-popup-header-body-uname {
  padding-left: 10px;
}
.user-card {
  padding-top: 10px;
  padding-left: 10px;
}
.user-card h1 {
  width: 130px;
  font-size: 20px;
  color: whitesmoke;
  overflow: hidden;
  text-overflow: ellipsis;
}
.van-col-button {
  padding-bottom: 10px;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  text-align: center;
}
</style>